<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header" @click="backChange">
        <el-icon size="20"><ArrowLeft /></el-icon>
        <span> 编辑Banner</span>
      </div>
    </template>

    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
      status-icon
    >
      <el-form-item label="Banner名称" prop="name" width="400">
        <el-input v-model="ruleForm.name" placeholder="请输入Banner名称" />
      </el-form-item>

      <el-form-item label="电脑端封面" prop="pic">
        <ImageUpload
          :limit="1"
          :modelValue="modelValueList"
          @update:modelValue="modelValue"
        ></ImageUpload>
      </el-form-item>

      <el-form-item label="电脑端链接" prop="url">
        <el-input v-model="ruleForm.url" placeholder="请输入电脑端链接" />
        <el-icon
          @click="maskBtn"
          :size="20"
          style="cursor: pointer; margin-left: 5px"
        >
          <Link />
        </el-icon>
      </el-form-item>
      <el-form-item>
        <a href="" style="color: #0f5cfb; font-size: 16px; font-weight: 500"
          >前往官网</a
        >
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          >提交</el-button
        >
        <el-button @click="resetForm(ruleFormRef)">预览</el-button>
      </el-form-item>
    </el-form>

    <!-- 弹出框 -->

    <el-dialog v-model="dialogFormVisible" title="常用链接">
      <el-tabs v-model="activeName" type="card" class="demo-tabs">
        <el-tab-pane
          label="常用功能"
          name="first"
          style="border-bottom: 1px solid #ccc"
        >
          <el-radio-group v-model="radio">
            <el-row>
              <el-col class="calssName" :span="24">
                <el-radio :value="3">智能填报</el-radio></el-col
              >
              <el-col class="calssName" :span="24">
                <el-radio :value="6">一键填报</el-radio></el-col
              >
              <el-col class="calssName" :span="24">
                <el-radio :value="9">专业定位测评</el-radio></el-col
              >
              <el-col class="calssName" :span="24">
                <el-radio :value="12">VIP购买</el-radio></el-col
              >
              <el-col class="calssName" :span="24">
                <el-radio :value="15">智能选科</el-radio></el-col
              >
            </el-row>
          </el-radio-group>
        </el-tab-pane>
        <el-tab-pane
          label="商品服务"
          name="second"
          style="border-bottom: 1px solid #ccc"
        >
          <el-radio-group v-model="radio">
            <el-row style="width: 100%">
              <el-col class="calssName" :span="24">
                <div class="box">
                  <el-radio :value="2">
                    <img
                      style="width: 154px; height: 94px"
                      src="@/assets/images/11.jpeg"
                    />
                    <div class="txt">智能填报</div>
                  </el-radio>
                </div>
              </el-col>
            </el-row>
          </el-radio-group>
        </el-tab-pane>
      </el-tabs>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false"
            >添加</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 预览dialog -->
    <el-dialog v-model="dialogFormVisible2" title="效果预览">
      <div class="box">
        <div class="padding">
          <el-row>
            <el-col :span="18" class="boxOne">
              <p>电脑端效果</p>
              <div class="boxPic">box</div>
            </el-col>
            <el-col :span="6" class="boxTow">
              <p>移动端效果</p>
              <div class="boxPic2">box2</div>
            </el-col>
          </el-row>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible2 = false"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();

const route = useRoute();

const dialogFormVisible = ref(false);
//预览
const dialogFormVisible2 = ref(false);

const dataList = ref([]);

const activeName = ref('first');

const radio = ref(3);

const row = ref('');

const ruleFormRef = ref(null);

const modelValueList = ref([]);

let ruleForm = ref({
  name: '',
  pic: '',
  url: '',
});

const modelValue = (val) => {
  ruleForm.value.picUrl = val; // 保存单张图片
};

const backChange = () => {
  router.push({ path: 'advertisement' });
};
const rules = reactive({
  name: [{ required: true, message: '请输入Banner名称', trigger: 'blur' }],
  pic: [{ required: true, message: '请上传封面', trigger: 'blur' }],
});

function maskBtn() {
  dialogFormVisible.value = !dialogFormVisible.value;
}

// 创建接口
const submitForm = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (!valid) return;
    router.push({ path: 'advertisement' });
  });
};

//预览
const resetForm = () => {
  dialogFormVisible2.value = true;
};

onMounted(() => {
  dataList.value = JSON.parse(route.query.data);

  row.value = dataList.value;
  ruleForm.value.name = dataList.value.name;
  ruleForm.value.url = dataList.value.url;
  ruleForm.value.pic = dataList.value.img_url;
});
</script>
<style lang="scss" scoped>
:deep(.el-dialog__body) {
  border-top: 1px solid #ccc !important;
  border-bottom: 1px solid #ccc !important;
}
:deep(.el-input) {
  width: 400px !important;
  height: 40px !important;
}
:deep(.el-row) {
  width: 100% !important;
}

.box-card {
  margin: 20px;
  .box {
    width: 100%;
    background: #f7f8fa;
    border-radius: 4px;
    padding: 10px 18px 38px;
    height: 370px;
    box-sizing: border-box;
    color: #86909c;
    .boxOne {
      .boxPic {
        width: 95%;
        height: 300px;
        border: 1px solid red;
      }
    }
    .boxTow {
      .boxPic2 {
        width: 100%;
        height: 300px;
        border: 1px solid green;
      }
    }
  }
  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .calssName {
    margin-bottom: 20px;
    margin-left: 10px;

    .box {
      display: flex;
      align-items: center;
      height: 94px;
      padding-bottom: 20px;
    }
    .txt {
      display: inline-block;
      position: relative;
      top: -40px;
      left: 5px;
    }
  }
}
</style>
